<template>
  <div id="vditor" ></div> 
</template>

<script>
import {  ref, onMounted } from "vue";
import Vditor from 'vditor'
import 'vditor/dist/index.css'
const contentEditor = ref("");
onMounted(()=>{
    
  
})
export default {
    
    setup() {
        onMounted(() => {
            contentEditor.value = new Vditor("vditor", {
                // height: 360,
                height: '600',
                toolbar: [],
                toolbarConfig: {
                    hide: true,
                },
                cache: {
                    enable: false,
                },
                after: () => {
                },
                preview: {
                    hljs: {
                        enable: true,
                        style: "github",
                        lineNumber: true
                    }
                },
                typewriterMode: true,
                
            });
        });
    },
    data() {
        return {
            contentEdit: {}
        }
    }
}
</script>

<style>
a {
  color: #42b983;
}
.vditor {
    border: none;
}

.vditor-reset h1, .vditor-reset h2 {
    border: none;
}
.vditor-reset {
    padding: 10px !important;
}

.vditor-toolbar--hide {
        height: 0 !important;
        /* transition: none; */
        background: orange;
        transition: none !important;
    }
.vditor-toolbar {
    border-bottom: none !important;
    padding: 0;
}

</style>